<template>
  <div class="content3 hw-flex-style-b-c">
    <div class="btm-left hw-box-style-flex hw-box-style-flex-r-center">
      <t-avatar size="24px" :image="urls+props.info.orgCoverUrl"> </t-avatar>
      <span class="bem-title hw-text-ov-clli">{{props.info.orgName}}</span>
    </div>
    <div class="btm-right hw-box-end-box">
      <div class="btm-right-title">
        <t-icon name="browse" class="icon-style title1-active"></t-icon>
        {{ props.info.browseTotal }}
      </div>
      <div class="btm-right-title" @click.stop="addfollow">
        <t-icon
          :name="props.info.isFollow ? 'star-filled' : 'star'"
          class="icon-style title1-active"
          :style="{ color: props.info.isFollow ? '#D2AD77' : '#999' }"
        ></t-icon>
        {{ props.info.followTotal }}
      </div> 
      <div class="btm-right-title" @click.stop="addlike">
        <t-icon name="chat" class="icon-style title1-active" ></t-icon>
        {{ props.info.likeTotal }}
      </div> 
    </div>
  </div>
</template>

<script setup lang="ts">
import {urls} from "@/utils/request/upload"
const emit = defineEmits(['like', 'follow']);
const props = defineProps({
  info: {
    type: Object,
  },
  index: {
    type: Number,
  },
});
const addlike = () => {
  emit('like', props.index);
};
const addfollow = () => {
  emit('follow', props.index);
};
</script>

<style lang="less" scoped>
.content3 {
  display: flex;
  width: 100%;
  margin-top: 17px;
}
.icon-style { 
  font-size: 16px; 
  color: #999999;
  margin-right: 4px;
}
.btm-right-title {
  display: flex;
  align-items: center;
  margin-left: 12px;
  font-size: 14px;
  font-family: DIN-Regular, DIN;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
.btm-left {
  width: 60%;
}
.bem-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
  margin-left: 6px;
}
</style>